'use client'

import Image from 'next/image'
import { useState } from 'react'
import { usePathname, useSearchParams } from 'next/navigation'
import { useRouter } from 'next-nprogress-bar'
import { Pagination } from '@nextui-org/react'

import arrowLeft0 from '@/public/arrow_left_black_0.png'
import arrowLeft1 from '@/public/arrow_left_black_1.png'
import arrowRight0 from '@/public/arrow_right_black_0.png'
import arrowRight1 from '@/public/arrow_right_black_1.png'

interface PaginatorProps {
  initialPage: number
  total: number
}

const Paginator: React.FC<PaginatorProps> = (props) => {
  const { initialPage, total } = props

  const [current, setCurrent] = useState(initialPage)

  const pathname = usePathname()
  const router = useRouter()
  const searchParams = useSearchParams()

  const handlePageChange = (newVal: number) => {
    setCurrent(newVal)
    const params = new URLSearchParams(searchParams)
    params.set('page', newVal.toString())
    router.replace(`${pathname}?${params.toString()}`, { scroll: false })
  }

  return (
    <div className='flex justify-between items-center'>
      {/* 左侧页码 */}
      <Pagination
        page={current}
        total={total}
        classNames={{
          wrapper:
            'h-[2.1875rem] lg:h-[3rem] 2xl:h-[4.5rem] bg-[#f8f8f8] rounded-full px-3',
          item: 'flex justify-center min-w-0 w-[1.5625rem] h-[1.5625rem] lg:w-[2rem] lg:h-[2rem] 2xl:w-[3.125rem] 2xl:h-[3.125rem] rounded-full bg-transparent text-[0.875rem] leading-[0.875rem]',
          cursor:
            'min-w-0 w-[1.5625rem] h-[1.5625rem] lg:w-[2rem] lg:h-[2rem] 2xl:w-[3.125rem] 2xl:h-[3.125rem] rounded-full bg-[#A6C32D]',
        }}
        onChange={handlePageChange}
      />
      {/* 右侧按钮 */}
      <div className='flex justify-between items-center w-[4.71875rem] 2xl:w-[7.078125rem]'>
        <div
          className='flex justify-center items-center w-[2.125rem] h-[2.125rem] rounded-full bg-[#f8f8f8] hover:bg-gray-200 lg:w-[2.0625rem] lg:h-[2.0625rem] 2xl:w-[3.09375rem] 2xl:h-[3.09375rem] cursor-pointer'
          onClick={() =>
            current > 1 ? handlePageChange(current - 1) : undefined
          }
        >
          <div className='relative w-[0.84375rem] h-[0.53125rem] 2xl:w-[1.265625rem] 2xl:h-[0.796875rem]'>
            <Image
              src={current === 1 ? arrowLeft0 : arrowLeft1}
              alt='arrow left icon'
              fill
              sizes='(mac-width: 1024px) 5vw, 10vw'
            />
          </div>
        </div>
        <div
          className='flex justify-center items-center w-[2.125rem] h-[2.125rem] rounded-full bg-[#f8f8f8] hover:bg-gray-200 lg:w-[2.0625rem] lg:h-[2.0625rem] 2xl:w-[3.09375rem] 2xl:h-[3.09375rem] cursor-pointer'
          onClick={() =>
            current < total ? handlePageChange(current + 1) : undefined
          }
        >
          <div className='relative w-[0.84375rem] h-[0.53125rem] 2xl:w-[1.265625rem] 2xl:h-[0.796875rem]'>
            <Image
              src={current === total ? arrowRight0 : arrowRight1}
              alt='arrow right icon'
              fill
              sizes='(mac-width: 1024px) 5vw, 10vw'
            />
          </div>
        </div>
      </div>
    </div>
  )
}

export default Paginator
